<template>
  <div class="header">
    <div class="box">
      <div class="left">
        <div class="menu" @click="back">
          <div class="tu"><iconBack class="icon"></iconBack></div>
          <div class="text">Back</div>
        </div>
        <div class="menu">
          <div class="tu"><iconEarth class="icon"></iconEarth></div>
          <div class="text">English</div>
        </div>
        <div class="menu">
          <div class="tu"><iconInfo class="icon"></iconInfo></div>
          <div class="text">Customer Service</div>
        </div>
        <div class="menu">
          <div class="tu"><iconPhoneOne class="icon"></iconPhoneOne></div>
          <div class="text" style="border:0;">USPS Mobile</div>
        </div>
      </div>
      <div class="left" style="float: right;">
        <div class="menu">
          <div class="tu"><iconUser class="icon"></iconUser></div>
          <div class="text" style="border: 0;">Register</div>
        </div>
      </div>
    </div>
  </div>
  <div class="top">
    <div class="logo"><logo class="icon"></logo></div>
  </div>
  <div class="title">Sign In To Your Account</div>
  <div class="body">
    <div class="left">
      <div class="title">Already have an account?</div>
      <div class="text">Enter Your Username and Password <div class="tu"><img src="../../assets/icon/info-help15x15.png"></div></div>
      <div class="warn" style="font-size: 13px;margin-top: 3px;"><span style="color: red;font-size: 10px;">*</span> indicates a required field</div>
      <div class="input">
        <div style="font-size: 13px;margin-top: 3px;font-weight: 100;"><span style="color: red;font-size: 10px;">*</span>Username</div>
        <el-input></el-input>
      </div>
      <div class="input">
        <div style="font-size: 13px;margin-top: 3px;font-weight: 100;"><span style="color: red;font-size: 10px;">*</span>Password</div>
        <el-input></el-input>
      </div>
      <el-button>Sign In</el-button>
      <a href="#">Forgot your username?<div class="tu"><img src="../../assets/icon/info-help15x15.png"></div></a>
      <a href="#">Forgot your password?<div class="tu"><img src="../../assets/icon/info-help15x15.png"></div></a>
      <ul>
        <li>The United States Postal Service is serious about protecting your</li>
        <li>personal information. <b>For added security, please consider</b></li>
        <li><b>changing your password periodically.</b></li>
      </ul>
    </div>
    <div class="right">
      <div class="title">New to USPS.com?</div>
      <div class="text">Create a USPS.com Account to...</div>
      <ul>
        <li>print shipping labels.</li>
        <li>request a Package Pickup.</li>
        <li>buy stamps and shop.</li>
        <li>manage PO boxes.</li>
        <li>print custom forms online.</li>
        <li>file domestic claims.</li>
        <li>set a preferred language.</li>
      </ul>
      <el-button>Sign Up Now</el-button>
    </div>
  </div>
  <feet></feet>
</template>
<script setup>
import feet from '../../components/modules/feet.vue'
import iconBack from '../../assets/icon/back.vue'
import iconEarth from '../../assets/icon/earthOne.vue'
import iconInfo from '../../assets/icon/infoOne.vue'
import iconPhoneOne from '../../assets/icon/phoneOne.vue'
import iconUser from '../../assets/icon/user.vue'
import logo from '../../assets/image/logo.vue'
import { routerKey, useRouter } from 'vue-router'


const router=useRouter()

const back=()=>{
  router.go(-1)
}
const go=(path)=>{
  router.push(path)
}
</script>
<style scoped>
img{
  width: 100%;
  height: 100%;
}
.icon{
  width: 100%;
  height: 100%;
}
.header{
  width: 100%;
  height: 34px;
  background-color: rgb(189, 189, 189);
  border-bottom:3.5px solid red ;
  display: flex;
  align-items: center;
  .box{
    width: 1170px;
    /* height: 15px; */
    height: 100%;
    /* background-color: antiquewhite; */
    margin:auto;
    .left{
      float: left;
      height: 100%;
      /* width: 300px; */
      display: flex;
      flex-direction: row;
      overflow-wrap: break-word;
      /* background-color: aquamarine; */
      .menu{
        padding-left: 10px;
        overflow-wrap: break-word;
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
        /* background-color: yellowgreen; */
        /* margin-right: 28px; */
        .tu{
          width: 17px;
          height: 15px;
          /* background-color: blueviolet; */
        }
        .text{
          /* overflow-wrap: break-word; */
          margin-left: 3px;
          margin-top: 5px;
          font-size: 12px;
          font-weight: 300;
          /* margin: 0 auto; */
          /* background-color: yellow; */
          padding-right: 13px;
          border-right:1.5px solid rgb(151, 151, 151); 
        }
      }
      .menu:hover{
        background-color: #f7f7f7;
        color: #0176d3;
      }
    }
  }
}
.top{
  width: 1199px;
  height: 30px;
  margin: 40px auto 0;
  /* background-color: yellowgreen; */
  .logo{
    float: left;
    width: 300px;
    height: 100%;
    /* background-color: yellow; */
  }
}
.title{
  width: 1160px;
  /* background-color: yellowgreen; */
  margin: 0 auto;
  font-size: 30px;
  font-weight: 600;
  margin-top: 58px;
  color: #333366;
}
.body{
  width: 1170px;
  /* height: 500px; */
  overflow-wrap: break-word;
  margin: 45px auto 0px;
  padding-bottom: 80px;
  /* background-color: yellowgreen; */
  display: flex;
  flex-direction: row;
  overflow: hidden;
  .left{
    width: 50%;
    height: 100%;
    /* background-color: yellow; */
    display: flex;
    flex-direction: column;
    .title{
      margin-top: 10px;
      font-size: 28px;
    }
    .text{
      display: flex;
      flex-direction: row;
      margin-top: 10px;
      font-weight: 600;
      .tu{
        width: 15px;
        height: 15px;
        margin-left: 3px;
        margin-top: -1px;
      }
    }
    .input{
      margin-top: 28px;
    }
    .el-input{
      margin-top: 3px;
      height: 45px;
      width: 420px;
      border: 1px solid rgb(0, 0, 0);
      /* background-color: #0176d3; */
    --el-input-focus-border-color: 10px 10px 10px 10px red;
      border-radius: 6px;
    }
    .el-input:hover{
      box-shadow: var(--slds-s-input-shadow-focus, var(--lwc-shadowButtonFocus, 0 0 3px #0176d3));
    }
    :deep(.el-input__wrapper){
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    }
    /* :deep(.el-input__wrapper):hover{
      box-shadow: var(--slds-s-input-shadow-focus, var(--lwc-shadowButtonFocus, 0 0 3px #0176d3));
    }
    :deep(.el-input__inner):focus{
      box-shadow: var(--slds-s-input-shadow-focus, var(--lwc-shadowButtonFocus, 0 0 3px #0176d3));
    } */
     .el-button{
      background-color: #333366;
      border: 0;
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      width: 200px;
      height: 43px;
      margin: 40px 0 19px 30px;
     }
     .el-button:hover{
      background-color: aliceblue;
      color: #333366;
     }
     a{
      /* background-color: #ffffff; */
      margin-top: 10px;
      font-weight: 600;
      display: flex;
      flex-direction: row;
      .tu{
        width: 15px;
        height: 15px;
        margin-left: 3px;
        margin-top: -1px;
      }
     }
     ul{
      list-style: none;
      margin-top: 29px;
      li{
        font-size: 12.5px;
      }
     }
  }
  .right{
    width: 50%;
    height: 100%;
    background-color: #f7f7f7;
    padding-left: 20px;
    .text{
      margin-top: 10px;
      font-weight: 600;
    }
    ul{
      padding-left: 20px;
      li{
        margin-top: 7px;
      }
    }
    .el-button{
      margin-top: 30px;
      margin-bottom: 50px;
      width: 170px;
      height: 40px;
      border: 1px solid #333366;
      font-size: 16px;
      font-weight: 700;
      color: #333366;
    }
    .el-button:hover{
      background-color: rgb(235, 235, 235);
    }
  }
}
</style>